<template>
	<view>
		<view class="list_wrapper">
			<u-empty text="没有可用的优惠券" v-if="dataset.length===0" />
			<view class="list" v-for="(item, index) in dataset" :key="index">
				<view class="price_box">
					<view class="num">
						<text>￥</text>
						{{ item.coupon_face_value }}
					</view>
					<view class="des">仅限{{ item.setmeal_name }}</view>
				</view>
				<view class="tx1" :class="item.overtime_soon == 1 ? 'over' : ''">
					<u-tag round type="danger" v-if="item.overtime_soon == 1">
						快过期
					</u-tag>
					{{ item.coupon_name }}
				</view>
				<view class="tx2">券编号：{{ item.number }}</view>
				<view class="tx2">
					有效期：{{ item.addtime | timeFilter }}-{{ item.deadline | timeFilter }}
				</view>
				<view class="tx3" @click="handleTip">
					立即使用>   
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<CustomerModal ref="CustomerModal"></CustomerModal>
	</view> 
</template>

<script>
	import {
		parseTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import CustomerModal from '@/components/CustomerModal.vue'
	export default {
		name: 'Coupon',
		components:{
			CustomerModal
		},
		filters: {
			timeFilter(timestamp) {
				return parseTime(timestamp, '{m}.{d}')
			}
		},
		data() {
			return {
				dataset: [],
			}
		},
		mounted() {
			this.fetchData()
		},
		methods: {
			handleTip(){
				this.$nextTick(()=>{
					this.$refs.CustomerModal.getCustomer()
				})
			},
			fetchData() {
				http
					.get(api.coupon_list, {})
					.then(res => {
						this.dataset = [...res.data.data.items]
					})
					.catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list_wrapper {
		.list {
			.price_box {
				.des {
					font-size: 26rpx;
				}

				.num {
					text {
						font-size: 36rpx;
					}

					font-size: 64rpx;
					padding-bottom: 20rpx;
				}

				position: absolute;
				left: 0;
				top: 0;
				background-image: linear-gradient(160deg, #f9d598 20%, #dab577 80%);
				width: 230rpx;
				height: 100%;
				padding-top: 56rpx;
				text-align: center;
				color: #ffffff;
			}

			.tx3 {
				text-align: right;
				font-size: 24rpx;
				color: #92672c;
			}

			.tx2 {
				font-size: 24rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-bottom: 18rpx;
			}

			.tx1 {
				position: relative;
				padding: 34rpx 0 36rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				&.over {
					.u-tag {
						position: absolute;
						left: 0;
						top: 26rpx;
					}

					padding-left: 106rpx;
				}
			}

			overflow: hidden;
			border-radius: 16rpx;
			margin-top: 34rpx;
			position: relative;
			background-color: #ffffff;
			padding: 0 20rpx 30rpx 260rpx;
			border: 2rpx solid #e9e9e9;
			border-left: 0;

			&::after {
				content: " ";
				position: absolute;
				left: -22rpx;
				top: 50%;
				transform: translate(0, -50%);
				z-index: 3;
				width: 40rpx;
				height: 40rpx;
				background-color: #ffffff;
				border-radius: 100%;
			}
		}

		width: 100%;
		padding: 0 34rpx;
	}
</style>
